<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>cloth store</title>

    <!-- Bootstrap -->
    <link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/detail.css">
    <link rel="stylesheet" href="/assets/bootstrapValidator/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="/assets/datetimepicker/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="/assets/toastr/toastr.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="store">
      <header class="header"></header>
      <div class="main detail wrapper">
        <div class="top">
            <h4>HOME PAGE &gt; PRODUCT DETAILS</h4>
            <div class="cloth-detail clearfix">
                <div class="left">
                    <img src="<%= img_src%>" alt="">
                </div>
                <div class="right">
                    <h3 class="sext-hidden"><%= title%></h3>
                    <div>price:￥<span class="price"><%= price%></span></div>
                    <div>color: <span>blue</span></div>
                    <div>size: <span>Free size</span></div>
                </div>
            </div>
        </div>
        <div class="bottom">
          <h5>PAY METHODS</h5>
          <div class="paymethods clearfix">
            <div class="funpay" style="margin-top:15px"  >
                <img src="/images/icon/funpay-select.png" alt="" style="display: block">
                <img src="/images/icon/funpay-unselect.png" alt="" style="display: none">
                <p style="font-size: 12px;margin-top: 3px;color: RGB(96,96,96);"> *Recommend</p>
                <label class="radio" id="funpayRadio">
                  <input type="radio" name="optionsRadios" id="funpay" value="0" checked > FUNPAY
                </label>
            </div>
            <div class="paypal">
              <img src="/images/icon/visa-logo.png" alt="">
              <img src="/images/icon/visa-unselect.png" alt="">
              <label class="radio" id="paypalRadio">
                <input type="radio" name="optionsRadios" id="visa" value="1" > VISA
              </label>
            </div>
            <div class="credit" >
              <img src="/images/icon/unionpay-logo.png" alt="">
              <img src="/images/icon/unionpay-unselect.png" alt="">
              <label class="radio" id="creditRadio">
                <input type="radio" name="optionsRadios" id="unionpay" value="2" > UNIONPAY
              </label>
            </div>
          </div>
          <div class="pay-line"></div>
          <!-- 支付表单 -->
          <div class="payform clearfix">
            <div class="left">
              <div class="logo-box">
                <img src="/images/icon/funpay-logo.png" alt="" class="funpaylogo">
                <img src="/images/icon/visa-logo.png" alt="" class="paypallogo">
                <img src="/images/icon/unionpay-logo.png" alt="" class="creditlogo">
              </div>
            </div>
            <div class="right">
              <form id="payForm">
                <div class="form-group">
                    <label for="cardNo">CARD NO</label>
                    <input type="text" class="form-control" name="cardNo" id="cardNo" placeholder="Card number">
                </div>
                <div class="form-group">
                    <label for="password">PASSWORD</label>
                    <input type="password" class="form-control" name="password" id="payPassword" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="datetimepicker">PERIOD OF VALIDITY</label>
                    <input type="text" class="form-control" name="datetimepicker" id="datetimepicker" placeholder="Period of card validity">
                </div>
                <div class="payment">
                  Accounts payable:￥<span id="price"><%= price%></span>
                  <button class="btn btn-default" id="submitBtn">PAY</button>
                </div>
              </form>
            </div>
          </div>
        </div>

      </div>

      <footer class="footer">
      
      </footer>

    </div>

    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/bootstrapValidator/js/bootstrapValidator.min.js"></script>
    <script src="/assets/datetimepicker/bootstrap-datetimepicker.min.js"></script>
    <script src="/assets/toastr/toastr.min.js"></script>
    <script src="/js/jquery.base64.min.js"></script>
  </body>
  <script>
    //消息提示全局配置
    toastr.options = {
      "closeButton": true,//是否配置关闭按钮
      "debug": false,//是否开启debug模式
      "newestOnTop": false,//新消息是否排在最上层
      "progressBar": false,//是否显示进度条
      "positionClass": "toast-center-center",//消息框的显示位置
      "preventDuplicates": false,//是否阻止弹出多个消息框
      "onclick": null,//点击回调函数
      "showDuration": "300",
      "hideDuration": "1000",
      "timeOut": "1500",//1.5s后关闭消息框
      "extendedTimeOut": "1000",
      "showEasing": "swing",
      "hideEasing": "linear",
      "showMethod": "fadeIn",
      "hideMethod": "fadeOut"
    }
    //toastr.info();
    //toastr.warning('Your computer is about to explode!', 'Warning');
    // 第一个参数为提示内容，第二个参数为提示标题，如果不需要标题，则可省略第二个参数
    
    //日期选择插件
    $('#datetimepicker').datetimepicker({
        weekStart: 1,
        autoclose: true,
        startView: 3,
        minView: 3,
        format: 'mm/yyyy'
    }).on('hide',function(e) { 
        $('#payForm').data('bootstrapValidator') 
        .updateStatus('datetimepicker', 'NOT_VALIDATED',null) 
        .validateField('datetimepicker'); 
    });

    //支付方式图标切换
    var btnObjs = document.querySelectorAll(".radio");
    for (var i = 0; i < btnObjs.length; i++) {
      btnObjs[i].onclick = function () {
        for(var j = 0; j < btnObjs.length; j++) {
            btnObjs[j].parentNode.firstElementChild.nextElementSibling.style.display="block";
            btnObjs[j].parentNode.firstElementChild.style.display="none";
        }//end for
        this.parentNode.firstElementChild.style.display="block";
        this.parentNode.firstElementChild.nextElementSibling.style.display="none";
      };  //end function
    }//end for

    //点击支付方式，切换logo
    $('#funpayRadio').on('click',function(e){
      $(".logo-box *").not(".funpaylogo").css('display','none');
      $(".logo-box .funpaylogo").css({'display':'block','margin-top':'95px'});
    });
    $('#paypalRadio').on('click',function(e){
      $(".logo-box *").not(".paypallogo").css('display','none');
      $(".logo-box .paypallogo").css({'display':'block','margin-top':'95px'});
    });
    $('#creditRadio').on('click',function(e){
      $(".logo-box *").not(".creditlogo").css('display','none');
      $(".logo-box .creditlogo").css({'display':'block','margin-top':'95px'});
    });

    //支付表单校验
    $("#payForm").bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            //普通字段不为空校验
            cardNo: {
                message: 'Error card number',
                validators: {
                    notEmpty: {
                        message: 'The card number cannot be empty'
                    },
                    regexp: {
                    regexp: /^\d{16}$/,
                    message:'Please enter the 16-bit card number'
                    },
                }
            },
            password: {
                message: 'Error password',
                validators: {
                    notEmpty: {
                        message: 'The password cannot be empty'
                    },
                    regexp: {
                        regexp: /^\d{4}$/ ,
                        message:'Please enter a 4-bit password'
                    },
                }
            },
            datetimepicker: {
              message: 'Error valid period of card',
              validators: {
                notEmpty: {
                    message: 'Period of card validity cannot be empty'
                },
                regexp: {
                    regexp: /^(0[1-9]|1[012])\/[1-9][0-9]{3}$/,
                    message:'Period of card validity cannot be empty'
                },
              }
            },
        },
    });
    var isPayClick = true;
    $('#submitBtn').on('click',function(e){
        e.preventDefault();
        // return;
        //定义一个校验器
        var bootstrapValidator = $("#payForm").data('bootstrapValidator');
        //执行校验
        bootstrapValidator.validate();
        //判断校验结果
        if(bootstrapValidator.isValid() & isPayClick){
          isPayClick=false;
          $('#submitBtn').html('loading')
          //校验成功,可以ajax提交表单到服务器
          var cardNo=$("#cardNo").val().trim();  //得到名称的值
          var password=$("#payPassword").val().trim();  
          var periodTime=$("#datetimepicker").val().trim(); 
          if($('#price').text()!='0.00'){
            $.ajax({   
              type:'post',
              data:{
                  "cardNo":cardNo,
                  "password":password,
                  "periodTime":periodTime,
                  "payMode":$("input[type='radio']:checked").val(),
              },
              dataType:'json', 
              url: "/pay",
              success: function(data) { 
                  if(data.code==1){
                      //提交成功
                      toastr.success('Pay for success!')
                      $("#cardNo").val('');  
                      $("#payPassword").val(''); 
                      $("#datetimepicker").val(''); 
                      $('#chgePwdForm').data("bootstrapValidator").resetForm();
                      $('#submitBtn').html('pay');
                      isPayClick=true;
                    }else{
                      //提交失败
                      toastr.error(data.msg)
                      $('#submitBtn').html('pay');
                      isPayClick=true;
                  }
              },
              error:function(xhr, textStatus){
                if(xhr.status==200){
                  location.href='/'
                }
              }
            });
          }
        }else{
            //校验失败
        }
    })
    
  </script>
</html> 